<template>
	<view class="block">
		<view class="title">
			<view class="left flex-box" :style='{color:color}' style="display: flex; align-items: center; justify-content: center;">
				<u-icon v-if="icons" :name="icons" :color="color" size="20"></u-icon>
				<text class="text">{{ title }}</text>
			</view>
			<view class="right flex-box">
				<slot name="kf"></slot>
				<text v-if="path" class="more" @click="navTo(path,opt)">更多</text>
			</view>
		</view>
		<slot></slot>
	</view>
</template>
<script>
import {useRouter} from '@/utils/utils.js'
export default {
	name: 'myBlock',
	props: {
		icons: {
			type: String,
			default: ''
		},
		color: {
			type: String,
			default: '#333333'
		},
		title: {
			type: String,
			default: '块标题'
		},
		path: {
			type: String,
			default:''
		},
		kefu:{
			type :String,
			default:''
		},
		opt: {
			type: String,
			default: 'navigateTo'
		}
	},
	computed:{
		
	},
	methods: {
		navTo(path,opt) {
			useRouter(path,{},opt)
		}
	}
};
</script>

<style lang="scss" scoped>
.block {
	// min-height: 200rpx;
	// margin-top: 15rpx;
	background-color: #fff;
	//padding-bottom: 20rpx;
	border-radius: 16rpx;
	.more{color: #666;}
	.title {
		display: flex;
		//height: 60rpx;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid #f2f2f2;
		padding:24rpx 0 12rpx 0;
		.left {
			height: inherit;	
			color: #003b83;
			font-weight: 600;
			font-size: 32rpx;
			padding-left: 8rpx;
			.my-icons {
				margin-left: 0rpx;
			}
			.text {
				margin-left: 6rpx;
				padding-bottom: 6rpx;
			}
		}
		.right {
			font-size: 28rpx;
			padding-right: 20rpx;
		}
	}
}
</style>
